<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <div class="card dish-management">
          <h1><i class="el-icon-food"></i> 菜品管理</h1>
          <el-form :model="dishData" ref="form" label-width="120px">
            <el-form-item label="菜品名称" prop="name" :rules="[{ required: true, message: '请输入菜品名称', trigger: 'blur' }]">
              <el-input v-model="dishData.name" />
            </el-form-item>
            <el-form-item label="价格" prop="price" :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }]">
              <el-input v-model="dishData.price" />
            </el-form-item>
            <el-form-item label="描述" prop="description" :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]">
              <el-input type="textarea" v-model="dishData.description" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitDish">提交菜品</el-button>
            </el-form-item>
          </el-form>
          <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
        </div>

        <div class="card dish-stats">
          <h2><i class="el-icon-pie-chart"></i> 菜品统计</h2>
          <p>总菜品数: {{ totalDishes }}</p>
          <p>本月新增菜品数: {{ monthlyDishes }}</p>
          <div ref="chart" class="chart"></div>
        </div>

        <div class="card dish-history">
          <h2><i class="el-icon-time"></i> 菜品历史</h2>
          <el-table :data="dishHistory" style="width: 100%">
            <el-table-column prop="name" label="菜品名称" width="150" />
            <el-table-column prop="price" label="价格" width="100" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="small" @click="editDish(scope.$index)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteDish(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="card safety-tips">
          <h2><i class="el-icon-warning-outline"></i> 安全提示</h2>
          <ul>
            <li v-for="(tip, index) in safetyTips" :key="index">
              <i class="el-icon-info safety-icon"></i>
              {{ tip }}
            </li>
          </ul>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';
import * as echarts from 'echarts';

export default {
  name: 'DishManagement',
  components: {
    AsideLayout
  },
  data() {
    return {
      dishData: {
        name: '',
        price: '',
        description: ''
      },
      errorMessage: '',
      dishHistory: [
        { name: '宫保鸡丁', price: '¥30', description: '经典川菜，辣味十足' },
        { name: '麻婆豆腐', price: '¥25', description: '麻辣鲜香' }
      ],
      safetyTips: [
        '请确保所有信息准确无误。',
        '在提交前，请仔细检查菜品信息。'
      ],
      totalDishes: 10,
      monthlyDishes: 3
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: '菜品统计'
        },
        tooltip: {},
        xAxis: {
          data: ['总菜品数', '本月新增菜品数']
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: [this.totalDishes, this.monthlyDishes]
        }]
      };
      chart.setOption(option);
    },
    submitDish() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.errorMessage = '请填写所有字段';
          return;
        }
        this.errorMessage = '';
        this.dishHistory.push({ ...this.dishData });
        this.dishData.name = '';
        this.dishData.price = '';
        this.dishData.description = '';
        console.log('提交的菜品数据:', this.dishData);
      });
    },
    editDish(index) {
      const dish = this.dishHistory[index];
      this.dishData = { ...dish };
      this.dishHistory.splice(index, 1);
    },
    deleteDish(index) {
      this.dishHistory.splice(index, 1);
      console.log('菜品已删除:', index);
    }
  }
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
  padding: 20px;
  background-color: #f5f7fa;
}

.card {
  flex: 1 1 calc(45% - 20px);
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

h1, h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

h1 i, h2 i {
  margin-right: 10px;
  color: #409EFF;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.safety-icon {
  margin-right: 8px;
  color: #f56c6c;
}

.error {
  color: red;
  margin-top: 10px;
}

.el-button {
  transition: background-color 0.3s, transform 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.el-input, .el-date-picker {
  transition: border-color 0.3s;
}

.el-input:focus, .el-date-picker:focus {
  border-color: #409EFF;
}

.chart {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}
</style>